import React, { useEffect, useRef, useState } from 'react';
import { useHistory, useLocation } from 'umi';
// @ts-ignore
import { useAliveController } from 'react-activation';
// @ts-ignore
import type { CachingNode } from 'react-activation';
import { Badge, Dropdown, Menu, Tag } from 'antd';
import useTabView from './TabViewHook';
import '../index.less';

const TabView: React.FC<{ node: CachingNode }> = ({ node }) => {
  const TabViewRef = useRef<HTMLSpanElement>();

  const { getCachingNodes } = useAliveController();
  const cachingNodes = getCachingNodes();
  const { close, closeOther, refresh } = useTabView();
  const history = useHistory();
  const location = useLocation();
  const [nodeCache, setNodeCache] = useState<{ name: string; path: string }>({
    name: node.name!!,
    path: node.location.pathname,
  });

  const isActive = location.pathname === node.location.pathname;

  // 第二次打开同名但是不同地址的页签时, 刷新页签内容
  useEffect(() => {
    if (nodeCache.name === node.name && nodeCache.path !== node.location.pathname) {
      setNodeCache({ name: node.name!!, path: node.location.pathname });
      refresh({ name: node.name, location: node.location });
    }
    if (isActive && TabViewRef.current) {
      // 父元素信息
      const parentNode = TabViewRef.current?.parentElement;
      // 获取元素信息
      const parentNodeBCR = parentNode?.getBoundingClientRect();
      const currentNodeBCR = TabViewRef.current?.getBoundingClientRect();
      // 元素被遮挡在左侧, 向右滚动
      if (currentNodeBCR.left < parentNodeBCR.left) {
        parentNode.scrollLeft -= parentNodeBCR.left - currentNodeBCR.left + currentNodeBCR.width;
      }
      // 元素被遮挡在右侧, 向左滚动
      if (currentNodeBCR.right > parentNodeBCR.right) {
        parentNode.scrollLeft += currentNodeBCR.right - parentNodeBCR.right + currentNodeBCR.width;
      }
    }
  }, [node.location.pathname]);

  return (
    <div className="tabview-tag">
      <Dropdown
        overlay={
          cachingNodes.length === 1
          ? <Menu>
            <Menu.Item
              className="menu-item"
              key="refreshSelf"
              onClick={() => refresh({ name: node.name!!, location: node.location })}
            >
              刷新
            </Menu.Item>
          </Menu>
          : <Menu>
            <Menu.Item
              className="menu-item"
              key="closeSelf"
              onClick={() => close({ name: node.name!!, location: node.location })}
            >
              关闭
            </Menu.Item>
            <Menu.Item
              className="menu-item"
              key="closeOther"
              onClick={() => closeOther({ name: node.name!!, location: node.location })}
            >
              关闭其他
            </Menu.Item>
            <Menu.Divider className="menu-item" />
            <Menu.Item
              className="menu-item"
              key="refreshSelf"
              onClick={() => refresh({ name: node.name!!, location: node.location })}
            >
              刷新
            </Menu.Item>
          </Menu>
        }
        trigger={['contextMenu']}
      >
        <Tag
          ref={TabViewRef}
          className="tag"
          color={isActive ? '#1890ff' : 'default'}
          onClick={() => history.push(node.location)}
          closable={cachingNodes.length > 1}
          onClose={(e) => {
            e.preventDefault();
            close({ name: node.name!!, location: node.location });
          }}
        >
          {isActive && <Badge color="#FFFFFF" dot />}
          {node.name}
        </Tag>
      </Dropdown>
    </div>
  );
};

export default TabView;
